<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="'商品'+ digTitle"
        width="1000px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          inline
          style="height: 300px"
        >
          <el-col :span="12">
            <el-form-item label="中文参数名称">
              <el-input v-model="form.nameCn" style="width: 220px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文参数名称">
              <el-input v-model="form.nameEn" style="width: 220px;" />
            </el-form-item>
          </el-col>
          <el-col :offset="-2">
            <el-card style="width: 900px;margin-bottom: 20px;min-height: 100px;border: 0" shadow="never" body-style="{padding: '0px'}">
              <el-col :span="11" :offset="-1">
                <el-form-item label="中文可选值列表">
                  <add-nature-input v-model="form.inputValueCn" />
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-form-item label="英文可选值列表">
                  <add-nature-input v-model="form.inputValueEn" />
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-form-item label="输入类型">
              <el-select v-model="form.inputType" filterable placeholder="请选择" style="width: 220px">
                <el-option
                  v-for="item in dict.inputType"
                  :key="item.id"
                  :label="item.dictValue"
                  :value="item.dictKey"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="属性选择类型">
              <el-select
                v-model="form.selectType"
                filterable
                placeholder="请选择"
                style="width: 220px"
              >
                <el-option
                  v-for="item in dict.selectType"
                  :key="item.id"
                  :label="item.dictValue"
                  :value="item.dictKey"
                  style="width: 220px"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input-number
                v-model.number="form.sort"
                :min="0"
                :max="999999"
                controls-position="right"
                style="width: 220px"
              />
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >确认
          </el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%"
        stripe
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="nameCn" label="名字">
          <template slot-scope="scope">
            <div>{{ scope.row.nameCn }}</div>
            <div>{{ scope.row.nameEn }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="inputValueCn" label="可选值列表">
          <template slot-scope="scope">
            <el-tag
              v-for="(item,index) in scope.row.inputValueCn"
              :key="index"
              style="margin-right: 5px;margin-bottom: 2px"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="inputType" label="输入类型">
          <template slot-scope="scope">
            {{ dict.label.inputType[scope.row.inputType] }}
          </template>
        </el-table-column>
        <el-table-column prop="productAttributeType" label="属性类型">
          <template slot-scope="scope">
            {{ dict.label.selectType[scope.row.selectType] }}
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />

        <el-table-column
          v-if="
            checkPer(['admin', 'productAttribute:edit', 'productAttribute:del'])
          "
          label="操作"
          width="150px"

        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudProductAttribute from '@/api/pms/productAttribute'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { setTitle } from '@/utils'
import addNatureInput from '@/views/pms/productAttribute/addNatureInput'

const defaultForm = {
  id: null,
  inputValueCn: [],
  inputValueEn: [],
  inputType: 0,
  selectType: 0,
  sort: 0,
  productAttributeType: 0,
  productAttributeCategoryId: 0,
  nameCn: null,
  nameEn: null

}
export default {
  name: 'ProductAttribute',
  components: { pagination, crudOperation, udOperation, addNatureInput },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: [
    'inputType',
    'selectType'
  ],
  cruds() {
    return CRUD({
      title: '',
      url: 'productAttribute/page',
      sort: 'id:desc',
      crudMethod: { ...crudProductAttribute }
    })
  },
  data() {
    return {
      digTitle: '',
      permission: {
        add: ['admin', 'productAttribute:add'],
        edit: ['admin', 'productAttribute:edit'],
        del: ['admin', 'productAttribute:del']
      },
      rules: {}
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.query.productAttributeType = this.$route.query.type
      this.query.productAttributeCategoryId = this.$route.query.id
      const title = this.query.productAttributeType === 0 ? '规格' : '参数'
      setTitle('商品' + title + '列表')
      this.digTitle = title
    },
    [CRUD.HOOK.beforeToCU]() {
      this.form.productAttributeType = this.$route.query.type
      this.form.productAttributeCategoryId = this.$route.query.id
    }
  }
}
</script>

<style scoped>
.el-card>>>.el-card__body {
  padding: 0;
}
</style>
